<template>
	<qh-page-view title="去买单" :loading="!pageLoaded">
		<view class="content flex-column flex-column-100">
			<template v-if="pageLoaded">
				<view class="flex-column-100">
					<view class="shadow-radius-item content-top-box">
						<view class="content-top-bg">
							<!-- <image v-if="topBgPath" :src="topBgPath" class="content-top-bg-img"></image> -->
						</view>
						<view class="store-info-box flex-cn">
							<view class="store-img-box">
								<qh-image :src="userInfo.store_image" :defaultUrl="defaultStoreImg" size="72" radius="50%"></qh-image>
							</view>
							<view class="store-info-right">
								<view class="merchant-name text-ellipsis">{{userInfo.merchant_name}}</view>
								<view class="store-name text-ellipsis">{{userInfo.store_name}}</view>
							</view>
						</view>
						<view class="price-content">
							<view class="prize-title">金额</view>
							<view class="prize-input-box font500 flex-cn" @click="inputFucos = true">
								<text>￥</text>
								<view v-if="payInfo.order_amount !== ''" class="prize-input">
									<text>{{payInfo.order_amount}}</text>
									<text class="input-fucos"></text>
								</view>
								<view v-else class="prize-input prize-input-pl" :class="{'input-fucos': inputFucos}">输入支付金额</view>
							</view>
						</view>
						<view class="scroll-tip-box flex-spe-cn" v-if="noticeList.length || userInfo.user_type == 1">
							<view class="scroll-tip-left flex-cn" v-if="noticeList.length">
								<text class="qh-rt-single qh-rt-a-zu4327 notice-icon"></text>
								<uni-notice-bar class="notice-bar" :speed="40" color="#5F6267" background-color="#fff" single scrollable :text="welfareDescribe"
									@click="showNoticePopup = true" />
							</view>
							<login-and-register v-if="userInfo.user_type == 1" scene="1" :type="userInfo.login_state == 1 ? 2 : 3" @success="getBaseData">
								<view class="scroll-tip-right flex-cn">
									<text>去注册</text>
									<text class="qh-rt-single qh-rt-you right-icon"></text>
								</view>
							</login-and-register>
							<!-- <view class="scroll-tip-right flex-cn" v-if="userInfo.user_type == 1" @click="toVip">
							<text>去注册</text>
							<text class="qh-rt-single qh-rt-you right-icon"></text>
						</view> -->
						</view>
					</view>
					<!-- 普通用户使用的门店优惠券 -->
					<view class="shadow-radius-item coupon-box flex-spb-cn" v-if="userInfo.user_type == 1">
						<view class="coupon-left flex-cn">
							<text class="qh-rt-single qh-rt-a-zu4328 coupon-icon"></text>
							<text>优惠券</text>
						</view>
						<view class="coupon-right flex-cn" @click="chooseCoupon">
							<text class="coupon-tips" v-if="!payInfo.order_amount && couponList.length">{{couponList.length}}张优惠券可用</text>
							<text class="coupon-pl" v-else-if="!canUseCouponList.length">暂无优惠券可用</text>
							<text class="coupon-tips" v-else-if="!couponInfo">{{canUseCouponList.length}}张优惠券可用</text>
							<text class="primary-color" v-else>-￥{{couponInfo.reduce_money}}</text>
							<text class="qh-rt-single qh-rt-you right-icon"></text>
						</view>
					</view>

					<view class="flex-spb mar-top-28">
						<view class="add-remark" @click="addRemark">添加备注</view>

						<view class="btn-item-box flex-col-end-cn">
							<view class="btn-item flex-cn-cn" @click="toVip" v-if="userInfo.user_type != 1">
								<text class="qh-rt-single qh-rt-a-zu4329 btn-icon"></text>
								<text>会员卡</text>
							</view>
							<!-- #ifdef MP-ALIPAY -->
							<view class="btn-item flex-cn-cn" @click="showAlipayCouponPopup = true">
								<text class="qh-rt-single qh-rt-a-zu4369 btn-icon"></text>
								<text>领券中心</text>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>

				<view class="keybord-box" :class="{'big-keybord': bottomHeight > 0}">
					<view class="keybord-left flex flex-wrap">
						<view class="key-item-box" v-for="(item, index) in codeList" :key="index" :class="{'key-item-zero': item == 0}">
							<view class="key-item flex-cn-cn" @tap="clickNumber(item)">{{item}}</view>
						</view>
					</view>
					<view class="keybord-right flex-column">
						<view class="key-del flex-cn-cn" @tap="delNumber" @longpress="delMoreNumber" @touchend="delNumberEnd">
							<text class="qh-rt-single qh-rt-a-zu4339 key-item-del-icon"></text>
						</view>
						<view class="pay-btn" :class="{'disabled': payBtnDisabled}" @click="showSettlementInfo">付款</view>
					</view>
				</view>
			</template>

			<!-- 轮播的优惠详情 -->
			<qh-center-popup v-model="showNoticePopup" title="会员优惠" :showCancel="false" confirmText="我知道了">
				<view class="notice-detail-box">
					<view class="notice-detail-list" v-if="noticeDetail.register.length">
						<view class="notice-detail-list-title font500">新注册会员专享</view>
						<view class="notice-detail-list-info" v-for="(item, index) in noticeDetail.register" :key="index">{{item.welfare_describe}}</view>
					</view>
					<view class="notice-detail-list" v-if="noticeDetail.recharge.length">
						<view class="notice-detail-list-title flex-spb-cn">
							<text class="font500">充值专享福利</text>
							<text class="green-text" @click="toRecharge">去充值</text>
						</view>
						<view class="notice-detail-list-info" v-for="(item, index) in noticeDetail.recharge" :key="index">{{item.welfare_describe}}</view>
					</view>
				</view>
			</qh-center-popup>
			<!-- 备注 -->
			<qh-center-popup v-model="showRemarkPopup" title="备注内容" @confirm="confirmRemark">
				<view class="remark-box">
					<textarea v-model="pay_remark" class="remark-input" placeholder="请输入要填写的备注内容" placeholder-class="remark-input-pl" maxlength="50"></textarea>
				</view>
			</qh-center-popup>
			<!-- 会员结算框 -->
			<qh-popup v-model="showSettlementPopup" title="请确认订单" confirmText="立即支付" :titleBorder="false" :showCancel="false" showCloseIcon
				class="settlement-popup" @confirm="showPayInfo">
				<view class="settlement-box">
					<view class="settlement-store-name">{{userInfo.store_name}}</view>
					<view class="settlement-all-money font500">￥{{payInfo.order_amount}}</view>
					<view class="settlement-list vip-box border-bottom flex-cn">
						<qh-user-head-img :src="userInfo.avatar" size="61"></qh-user-head-img>

						<view class="vip-right">
							<view class="vip-info-top flex-cn">
								<view class="vip-name-box flex-cn">
									<text class="text-ellipsis font500">{{userInfo.nickname ? userInfo.nickname : '未设置'}}</text>
									<text class="qh-rt-single qh-rt-a-zu4340 plus-vip-icon" v-if="userInfo.user_type == 2"></text>
									<text class="qh-rt-single qh-rt-a-zu4351 vip-icon" v-if="userInfo.user_type == 3"></text>
								</view>
							</view>
							<view class="flex-spb-cn mar-top-12">
								<text class="vip-info-text font-size-28">{{userInfo.card_num}}</text>
								<view class="flex-cn">
									<text class="vip-info-text" v-if="payInfo.actual_payment_amount > userInfo.balance">余额不足</text>
									<text class="vip-info-text green-text" @click="toRecharge">去充值?</text>
								</view>
							</view>
							<view class="flex-cn mar-top-12">
								<text class="vip-info-text">余额:{{userInfo.balance}}</text>
								<text class="vip-info-text">{{integral_name}}:{{userInfo.integral}}</text>
								<text class="vip-info-text">{{userInfo.discount_describe}}折</text>
							</view>
						</view>
					</view>
					<view class="settlement-list coupon-box border-bottom flex-spb-cn">
						<view class="coupon-left flex-cn">
							<text class="qh-rt-single qh-rt-a-zu4328 coupon-icon"></text>
							<text class="font500">优惠券</text>
						</view>
						<view class="coupon-right flex-cn" @click="chooseCoupon">
							<text class="coupon-pl" v-if="!canUseCouponList.length">暂无优惠券可用</text>
							<text class="coupon-tips" v-else-if="!couponInfo">{{canUseCouponList.length}}张优惠券可用</text>
							<text class="primary-color" v-else>-￥{{couponInfo.reduce_money}}</text>
							<text class="qh-rt-single qh-rt-you right-icon"></text>
						</view>
					</view>
					<view v-if="merConfig.integral_arrive_cash == 1 && merConfig.marketing_methods == 1"
						class="settlement-list integral-box border-bottom flex-cn">
						<text class="qh-rt-single qh-rt-a-zu4341 integral-icon"></text>
						<view class="integral-right">
							<view class="integral-right-top flex-spb-cn">
								<view class="integral-title font500">{{integral_name}}抵扣</view>
								<view class="integral-input-box flex-cn">
									<input v-model="payInfo.integral_dis_num" type="number" :disabled="maxUseIntegral == 0" class="integral-input"
										@blur="calculateIntegral">
									<qh-radio v-model="payInfo.is_integral_cash" padding="20" :disabled="maxUseIntegral == 0" :activeValue="1"
										:inactiveValue="0" @change="calculateIntegral">
									</qh-radio>
								</view>
							</view>
							<view class="integral-text flex-spb-cn">
								<text>{{integral_name}}{{userInfo.integral}}，最多可以使用{{maxUseIntegral}}{{integral_name}}抵现{{maxLessMoney}}元</text>
							</view>
						</view>
					</view>
					<view class="settlement-list discount-box">
						<view class="flex-spb-cn">
							<text class="discount-title font500">订单金额</text>
							<text class="discount-info font500">￥{{payInfo.order_amount}}</text>
						</view>
						<view class="flex-spb-cn mar-top-16" v-if="discountInfo.vip_dis_money > 0">
							<view class="discount-sub-title flex-cn">
								<text>会员折扣优惠</text>
								<text class="primary-color">{{userInfo.discount_describe}}折</text>
							</view>
							<text class="green-text">-￥{{discountInfo.vip_dis_money}}</text>
						</view>
						<view class="flex-spb-cn mar-top-16" v-if="couponInfo">
							<view class="discount-sub-title flex-cn">
								<text>优惠券优惠</text>
								<text class="primary-color">满{{couponInfo.need_money}}减{{couponInfo.reduce_money}}元</text>
							</view>
							<text class="green-text">-￥{{couponInfo.reduce_money}}</text>
						</view>
						<view class="flex-spb-cn mar-top-16" v-if="payInfo.is_integral_cash == 1">
							<view class="discount-sub-title flex-cn">
								<text>{{integral_name}}抵现优惠</text>
								<text class="primary-color">{{payInfo.integral_dis_num}}{{integral_name}}抵{{payInfo.integral_dis_money}}元</text>
							</view>
							<text class="green-text">-￥{{payInfo.integral_dis_money}}</text>
						</view>
						<view class="flex-spb-cn mar_t_20">
							<text class="discount-title font500">实际支付金额</text>
							<text class="discount-title font500">￥{{payInfo.actual_payment_amount}}</text>
						</view>
					</view>
				</view>
			</qh-popup>
			<!-- 会员支付框 -->
			<qh-popup v-model="showPaymentPopup" title="请确认订单" confirmText="确认支付" :titleBorder="false" :showCancel="false" showCloseIcon
				class="settlement-popup" @confirm="submitPayment">
				<view class="settlement-box">
					<view class="settlement-all-money font500">￥{{payInfo.actual_payment_amount}}</view>
					<view v-if="paySet[1] == 1" class="settlement-list payment-box border-bottom flex-spb-cn">
						<view class="flex-cn">
							<text class="qh-rt-single qh-rt-a-zu4331 payment-type-icon balance-pay-icon"></text>
							<text class="payment-title">余额支付</text>
							<text class="vip-balance">余额:{{userInfo.balance}}</text>
							<text class="vip-balance green-text" @click="toRecharge">去充值?</text>
						</view>
						<qh-radio v-model="payInfo.payment_method" padding="20" :activeValue="2" :inactiveValue="0"></qh-radio>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view v-if="paySet[0] == 1" class="settlement-list payment-box border-bottom flex-spb-cn">
						<view class="flex-cn">
							<text class="qh-rt-single qh-rt-a-zu4332 payment-type-icon wechat-pay-icon"></text>
							<text class="payment-title">微信支付</text>
						</view>
						<qh-radio v-model="payInfo.payment_method" :activeValue="1" padding="20" :inactiveValue="0"></qh-radio>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view v-if="paySet[3] == 1" class="settlement-list payment-box border-bottom flex-spb-cn">
						<view class="flex-cn">
							<text class="qh-rt-single qh-rt-a-lujing1531 payment-type-icon alipay-icon"></text>
							<text class="payment-title">支付宝支付</text>
						</view>
						<qh-radio v-model="payInfo.payment_method" :activeValue="4" padding="20" :inactiveValue="0"></qh-radio>
					</view>
					<!-- #endif -->
					<view v-if="paySet[2] == 1 && userInfo.balance >= 0.01 && payInfo.actual_payment_amount > 0.01"
						class="settlement-list payment-box border-bottom">
						<view class="flex-spb-cn">
							<view class="flex-cn">
								<text class="qh-rt-single qh-rt-a-zu4334 payment-type-icon group-pay-icon"></text>
								<text class="payment-title">组合支付</text>
							</view>
							<qh-radio v-model="payInfo.payment_method" :activeValue="3" padding="20" :inactiveValue="0"></qh-radio>
						</view>
						<view class="payment-group-box">
							<view class="flex-spb-cn mar-btm-30">
								<text class="payment-group-title">余额支付金额</text>
								<input v-model="payInfo.balance_pay_money" type="digit" class="payment-group-input" placeholder="请输入"
									placeholder-class="payment-group-pl" @blur="inputBalanceBlur">
							</view>
							<!-- #ifdef MP-WEIXIN -->
							<view class="flex-spb-cn">
								<text class="payment-group-title">微信支付金额</text>
								<input v-model="payInfo.third_pay_money" type="digit" class="payment-group-input" placeholder="请输入"
									placeholder-class="payment-group-pl" @blur="inputThirdBlur">
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<view class="flex-spb-cn">
								<text class="payment-group-title">支付宝支付金额</text>
								<input v-model="payInfo.third_pay_money" type="digit" class="payment-group-input" placeholder="请输入"
									placeholder-class="payment-group-pl" @blur="inputThirdBlur">
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</qh-popup>
			<!-- 会员支付密码弹框 -->
			<template-password pay v-if="showPayPassword" v-model="order.password" :price="payInfo.actual_payment_amount" @success="vipCardPay"
				@cancel="cancelPassword">
			</template-password>
			<!-- #ifdef MP-ALIPAY -->
			<qh-popup v-model="showAlipayCouponPopup" title="商家优惠券" :titleBorder="false" :showButton="false" showCloseIcon>
				<view class="tips-color font-size-26 pad-btm-30 flex-cn-cn">领取的优惠券可以直接买单使用或在卡包查看</view>
				<view class="pad-btm-30">
					<mkt v-if="canIUseMkt && userInfo.cityCode" mode="AUTOMATIC" boothCode="MERCHANT_SELF_TINYAPP" :cityCode="userInfo.cityCode" version="2"
						onError="onError" onRender="onRender" onApplySuccess="onApplySuccess"></mkt>
					<view v-if="!alipayCouponCount" class="tips-color font-size-28 flex-cn-cn" style="height: 400rpx;">暂无优惠券</view>
				</view>
			</qh-popup>
			<!-- #endif -->
		</view>
	</qh-page-view>

</template>

<script>
	const app = getApp().globalData;

	import templatePassword from '@/components/template-password.vue';

	export default {
		components: {
			templatePassword,
		},
		data() {
			return {
				pageLoaded: false,
				topBgPath: '',
				defaultStoreImg: '',
				inputFucos: true,
				showNoticePopup: false,
				showRemarkPopup: false,
				showSettlementPopup: false,
				showPaymentPopup: false,
				showPayPassword: false,
				//#ifdef MP-ALIPAY
				canIUseMkt: my.canIUse('mkt'),
				showAlipayCouponPopup: false,
				alipayCouponCount: 0,
				//#endif
				delNumberTimer: null,
				pay_remark: '',
				maxUseIntegral: 0,
				maxLessMoney: 0,
				userInfo: {
					merchant_name: '',
					store_name: '',
					store_image: '',
					grade_name: '会员',
					user_type: 1,
					integral: 0,
					discount: 1,
					vid: '',
					balance: 0,
					card_num: '',
					nickname: '',
					avatar: '',
					plus_id: '',
					plus_end_time: '',
					plus_state: '',
					discount_describe: 10,
					login_state: 0,
					//#ifdef MP-ALIPAY
					cityCode: '',
					//#endif
				},
				noticeList: [],
				couponList: [],
				canUseCouponList: [], //可用券列表
				merConfig: {
					integral_arrive_cash: '0',
					integral_arrive_cash_data: '1',
					integral_arrive_cash_price: '0.10',
					integral_arrive_cash_rate: '0.2000',
					marketing_methods: '1'
				},
				paySet: [
					1, //微信支付是否开启
					1, //余额支付是否开启
					1, //组合支付是否开启
					0, //支付宝支付是否开启
				],
				payInfo: {
					order_amount: '', //订单价格
					actual_payment_amount: 0, //实际付款金额
					vip_discount_status: 0, //是否使用会员折扣 1使用 0未使用
					coupon_record_id: '', //优惠券id
					coupon_choice_type: '', //优惠券类型 1门店优惠券 2商户优惠券 3门店商家券
					is_integral_cash: 0, //是否启用积分抵现1启用 0不启用 1启用
					integral_dis_money: 0, //分抵扣的金额或者抵扣积分的金额
					integral_dis_num: 0, //使用的积分数
					payment_method: '', //支付类型 1微信 2余额支付 3组合支付 4支付宝
					third_pay_money: '', //组合支付时 微信支付/支付宝支付的金额
					balance_pay_money: '', //组合支付时 余额支付的金额
					remark: '', //订单备注
				},
				codeList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
				discountInfo: {
					vip_dis_money: 0,
				},
				couponInfo: null,
				isChooseCoupon: false,
				order: {
					order_number: '',
					password: '',
					payData: null,
				},
				isPaying: false, //是否正在支付中
				longDelState: false,

				store_id: '', //门店id
				integral_name:''

			}
		},
		computed: {
			payBtnDisabled() {
				return this.payInfo.order_amount == '' || this.payInfo.order_amount * 1 == 0;
			},
			noticeDetail() {
				let obj = {
					register: [],
					recharge: [],
				};
				this.noticeList.forEach(item => {
					if (item.activity_type == 1) {
						obj.register.push(item)
					} else {
						obj.recharge.push(item)
					}
				})
				return obj;
			},
			bottomHeight() {
				return this.$store.bottomHeight;
			},
			welfareDescribe() {
				let arr = [];
				this.noticeList.forEach(item => {
					arr.push(item.welfare_describe)
				})
				return arr.join(' ');
			},
		},
		async onLoad() {
			await this.$onLaunched;
			this.integral_name = this.$store.integral_name;
			this.topBgPath = this.$store.image_header + '/mall-direct-pay-bg.png';
			this.defaultStoreImg = this.$store.image_header + '/default-store-img.png';
			//#ifdef MP-ALIPAY
			this.$scope.onRender = this.onRender
			this.$scope.onApplySuccess = this.onApplySuccess
			this.$scope.onError = this.onError
			//#endif

			this.store_id = this.$store.store_id;
			uni.removeStorageSync('useCoupon');
		},
		async onShow() {
			await this.$onLaunched;
			if (this.store_id && this.store_id != this.$store.store_id) {
				//切换门店扫码
				this.payInfo.order_amount = '';
				return this.getBaseData();
			}
			if (!this.isPaying && !this.isChooseCoupon) {
				this.getBaseData();
			} else if (this.isPaying) {
				setTimeout(() => {
					//防止取消支付也走查询，延迟0.5秒再进行判断一次
					if (this.isPaying) {
						this.isPaying = false;
						this.searchOrder(0);
					}
				}, 500)
			}
			if (this.isChooseCoupon) {
				this.isChooseCoupon = false;
				let coupon = uni.getStorageSync('useCoupon');
				// console.log(coupon)
				if (coupon) {
					this.couponInfo = coupon;
				} else {
					this.couponInfo = null;
				}

				this.calculationIntegralCash();
				this.calculateIntegral();
				this.$nextTick(() => {
					this.calculatePayPrice();
				})
			}
		},
		methods: {
			//#ifdef MP-ALIPAY
			onError(e) {
				console.log('mktError2', e)
			},
			onRender(e) {
				console.log('onRender2', e)
				this.alipayCouponCount = e.detail.campAmount;
			},
			onApplySuccess(e) {
				console.log('onApplySuccess2', e)
			},
			//#endif
			//显示结算弹窗
			showSettlementInfo() {
				if (this.payInfo.order_amount == '' || this.payInfo.order_amount * 1 == 0) return uni.showToast({
					title: '请输入付款金额',
					icon: 'none'
				})
				if (this.userInfo.user_type == 1) {
					//直接付款
					// #ifdef MP-WEIXIN
					if (this.paySet[0] != 1) return uni.showToast({
						title: '商家未开启微信支付',
						icon: 'none'
					})
					this.payInfo.payment_method = 1;
					// #endif
					// #ifdef MP-ALIPAY
					if (this.paySet[3] != 1) return uni.showToast({
						title: '商家未开启支付宝支付',
						icon: 'none'
					})
					this.payInfo.payment_method = 4;
					// #endif

					this.calculatePayPrice();
					this.submitPayment();
				} else {
					this.showSettlementPopup = true;
					this.payInfo.integral_dis_num = 0;
					this.payInfo.integral_dis_money = 0;
					this.calculateDiscount();
					this.autoChooseCoupon();
					this.calculationIntegralCash();
					this.calculatePayPrice();
				}
			},
			//显示付款弹窗
			showPayInfo() {
				if (this.payInfo.is_integral_cash == 1 && (!this.payInfo.integral_dis_num || this.payInfo.integral_dis_num == '')) {
					return uni.showToast({
						title: '请设置使用'+this.integral_name+'的数量',
						icon: 'none',
						duration: 2000
					})
				}
				this.showSettlementPopup = false;
				let defaulPayType = this.userInfo.balance > 0 && this.paySet[1] == 1 ? 2 : '';
				// #ifdef MP-WEIXIN
				defaulPayType = defaulPayType == '' && this.paySet[0] == 1 ? 1 : defaulPayType;
				// #endif
				// #ifdef MP-ALIPAY
				defaulPayType = defaulPayType == '' && this.paySet[3] == 1 ? 1 : defaulPayType;
				// #endif
				// console.log(defaulPayType);
				if (defaulPayType == '') {
					return uni.showToast({
						title: '商家未开启支付，请稍后重试',
						icon: 'none',
						duration: 2000
					})
				}
				this.payInfo.payment_method = defaulPayType;
				this.showPaymentPopup = true;
				this.payInfo.third_pay_money = '';
				this.payInfo.balance_pay_money = '';
			},
			//计算会员折扣优惠金额
			calculateDiscount() {
				let money = this.payInfo.order_amount;
				if (this.payInfo.vip_discount_status == 1 && this.userInfo.user_type != 1) {
					money = app.roundPrice(this.payInfo.order_amount * this.userInfo.discount);
					// console.log(money);
					if (money == 0 || money == this.payInfo.order_amount && money == 0.01) {
						//最低支付1分钱
						money = 0.01;
					}
				}
				this.discountInfo.vip_dis_money = app.roundPrice(this.payInfo.order_amount - money);
			},
			//处理可用券
			handlerCanUseCoupon() {
				this.calculateDiscount();
				this.$nextTick(() => {
					let money = app.roundPrice(this.payInfo.order_amount - this.discountInfo.vip_dis_money);
					let arr = [];
					this.couponList.forEach(item => {
						if (money >= item.need_money * 1) {
							arr.push({
								...item
							});
						}
					})
					this.canUseCouponList = arr;
					if (this.couponInfo && this.couponInfo.need_money * 1 >= this.payInfo.order_amount) {
						this.couponInfo = null;
					}
				})
			},
			//自动选择最大优惠的优惠券
			autoChooseCoupon() {
				let couponInfo = {
					id: '',
					coupon_choice_type: '',
					need_money: 0,
					reduce_money: 0,
				};
				this.canUseCouponList.forEach(item => {
					if (item.reduce_money * 1 > couponInfo.reduce_money) {
						couponInfo = {
							...item
						};
					}
				})
				this.couponInfo = couponInfo.id ? couponInfo : null;
				if (this.couponInfo) {
					uni.setStorageSync('useCoupon', couponInfo);
				} else {
					uni.removeStorageSync('useCoupon');
				}
			},
			//计算最多能使用的积分和最多能抵扣的金额
			calculationIntegralCash() {
				let maxMoney = 0; //最大使用积分能抵扣的金额（仅针对基于订单）、需要抵扣不足积分的金额（仅针对基于商品
				let maxIntegral = 0; //最大使用积分

				if (this.merConfig.integral_arrive_cash == 1 && this.userInfo.user_type != 1 && this.merConfig.marketing_methods == 1 &&
					this.userInfo.integral > 0) {
					//基于订单
					let actualMoney = this.payInfo.order_amount; //原应支付金额

					if (this.payInfo.vip_discount_status == 1) {
						actualMoney = app.roundPrice(actualMoney - this.discountInfo.vip_dis_money); //减掉会员等级折扣优惠金额
					}

					if (this.couponInfo) {
						actualMoney = app.roundPrice(actualMoney - this.couponInfo.reduce_money); //减掉优惠券金额
					}
					maxMoney = Math.floor(this.merConfig.integral_arrive_cash_rate * actualMoney * 100) / 100;
					maxIntegral = Math.floor(this.merConfig.integral_arrive_cash_data * maxMoney / this.merConfig.integral_arrive_cash_price);

					if (this.userInfo.integral < maxIntegral) {
						maxIntegral = this.userInfo.integral;
					}

					//以积分为主再次计算能抵扣的金额
					maxMoney = app.roundPrice(maxIntegral * this.merConfig.integral_arrive_cash_price / this.merConfig.integral_arrive_cash_data);

					if (maxMoney >= actualMoney) {
						maxMoney = app.roundPrice(actualMoney - 0.01);
					}
					if (maxIntegral == 0) {
						maxMoney = 0;
					}
				}
				this.maxUseIntegral = maxIntegral;
				this.maxLessMoney = maxMoney;
				if (this.payInfo.integral_dis_num == 0) {
					this.payInfo.integral_dis_num = maxIntegral;
					this.payInfo.integral_dis_money = maxMoney;
					this.payInfo.is_integral_cash = maxIntegral > 0 ? 1 : 0;
				}
			},
			//计算实际使用的积分抵扣金额
			calculateIntegral() {
				if (this.merConfig && this.merConfig.integral_arrive_cash == 1 && this.merConfig.marketing_methods == 1) {
					if (this.payInfo.integral_dis_num == 0) {
						this.payInfo.integral_dis_money = 0;
					} else {
						if (this.payInfo.integral_dis_num > this.maxUseIntegral) {
							this.payInfo.integral_dis_num = this.maxUseIntegral;
						}
						if (this.payInfo.integral_dis_num != this.maxUseIntegral) {
							let money = this.payInfo.integral_dis_num * this.merConfig.integral_arrive_cash_price / this.merConfig.integral_arrive_cash_data;
							money = app.roundPrice(money);

							let actualMoney = this.payInfo.order_amount; //原应支付金额
							if (this.payInfo.vip_discount_status == 1) {
								actualMoney = app.roundPrice(actualMoney - this.discountInfo.vip_dis_money); //减掉会员等级折扣优惠金额
							}
							if (this.couponInfo) {
								actualMoney = app.roundPrice(actualMoney - this.couponInfo.reduce_money); //减掉优惠券金额
							}
							if (money >= actualMoney) {
								money = app.roundPrice(actualMoney - 0.01);
							}
							this.payInfo.integral_dis_money = money;
						} else {
							this.payInfo.integral_dis_money = this.maxLessMoney;
						}
					}
				} else {
					this.payInfo.integral_dis_money = 0;
				}
				if (this.payInfo.integral_dis_money == 0) {
					this.payInfo.integral_dis_num = 0;
				}
				this.calculatePayPrice();
			},
			//计算最终付款的总金额
			calculatePayPrice() {
				//1.减折扣
				let money = app.roundPrice(this.payInfo.order_amount - this.discountInfo.vip_dis_money);
				//2.减优惠券
				if (this.couponInfo) {
					money = app.roundPrice(money - this.couponInfo.reduce_money);
				}
				//3.减积分抵扣
				if (this.payInfo.is_integral_cash == 1) {
					money = app.roundPrice(money - this.payInfo.integral_dis_money);
				}
				this.payInfo.actual_payment_amount = money;
			},
			//输入组合支付的余额
			inputBalanceBlur() {
				if (this.payInfo.balance_pay_money === '0' || this.payInfo.balance_pay_money === '') {
					this.payInfo.balance_pay_money = '';
				} else {
					this.payInfo.balance_pay_money = Math.floor(parseFloat(this.payInfo.balance_pay_money) * 100) / 100;
					if (this.payInfo.balance_pay_money >= this.payInfo.actual_payment_amount) {
						this.payInfo.balance_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - 0.01);
					}
				}
				if (this.payInfo.third_pay_money !== '' && this.payInfo.balance_pay_money === '') {
					this.payInfo.balance_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - this.payInfo.third_pay_money);
				} else if (this.payInfo.balance_pay_money !== '') {
					this.payInfo.third_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - this.payInfo.balance_pay_money);
				}
				this.payInfo.balance_pay_money = String(this.payInfo.balance_pay_money);
				this.payInfo.third_pay_money = String(this.payInfo.third_pay_money);
			},
			//输入组合支付的三方支付金额
			inputThirdBlur() {
				if (this.payInfo.third_pay_money === '0' || this.payInfo.third_pay_money === '') {
					this.payInfo.third_pay_money = '';
				} else {
					this.payInfo.third_pay_money = Math.floor(parseFloat(this.payInfo.third_pay_money) * 100) / 100;
					if (this.payInfo.third_pay_money >= this.payInfo.actual_payment_amount) {
						this.payInfo.third_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - 0.01);
					}
				}
				if (this.payInfo.balance_pay_money !== '' && this.payInfo.third_pay_money === '') {
					this.payInfo.third_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - this.payInfo.balance_pay_money);
				} else if (this.payInfo.third_pay_money !== '') {
					this.payInfo.balance_pay_money = app.roundPrice(this.payInfo.actual_payment_amount - this.payInfo.third_pay_money);
				}
				this.payInfo.balance_pay_money = String(this.payInfo.balance_pay_money);
				this.payInfo.third_pay_money = String(this.payInfo.third_pay_money);
			},
			//提交支付
			async submitPayment() {
				if (!this.payInfo.payment_method) {
					return uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
				}
				if (this.payInfo.payment_method == 3) {
					//组合支付
					if (!this.payInfo.balance_pay_money || this.payInfo.balance_pay_money == '0') {
						return uni.showToast({
							title: '请输入余额支付金额',
							icon: 'none'
						})
					}
					if (this.payInfo.balance_pay_money * 1 > this.userInfo.balance) {
						return uni.showToast({
							title: '会员余额不足',
							icon: 'none'
						})
					}
					if (!this.payInfo.third_pay_money || this.payInfo.third_pay_money == '0') {
						return uni.showToast({
							// #ifdef MP-WEIXIN
							title: '请输入微信支付金额',
							// #endif
							// #ifdef MP-ALIPAY
							title: '请输入支付宝支付金额',
							// #endif
							icon: 'none'
						})
					}
				} else if (this.payInfo.payment_method == 2) {
					if (this.payInfo.actual_payment_amount > this.userInfo.balance) {
						return uni.showToast({
							title: '会员余额不足',
							icon: 'none'
						})
					}
				}

				this.showPaymentPopup = false;
				const {
					status,
					data,
					message
				} = await this.$request({
					url: '/AggregationCode/PlaceOrder/createOrder'
				}, this.payInfo);
				if (status !== 1) {
					return uni.showModal({
						title: '温馨提示',
						content: message,
						showCancel: false,
						confirmText: '确定',
						confirmColor: '#ff5c6d'
					})
				}
				this.order.order_number = data.order_number;
				if (this.payInfo.payment_method == 2) {
					this.showPayPassword = true;
				} else {
					this.order.payData = data.payData;
					this.isPaying = true;
					// #ifdef MP-WEIXIN
					this.wxPay();
					// #endif
					// #ifdef MP-ALIPAY
					this.aliPay();
					// #endif
				}
			},
			//会员余额支付
			async vipCardPay() {
				const {
					status,
					message
				} = await this.$request({
					url: '/AggregationCode/PlaceOrder/vipPayment'
				}, {
					order_number: this.order.order_number,
					password: this.order.password,
				});
				if (status == 1) {
					this.paySuccess();
				} else {
					this.order.password = '';
					uni.showModal({
						title: '错误提示',
						content: message,
						showCancel: false,
						confirmText: '确定',
						confirmColor: '#ff5c6d'
					});
				}
			},
			//取消会员支付
			cancelPassword() {
				this.showPayPassword = false;
				this.showSettlementPopup = true;
			},
			// #ifdef MP-WEIXIN
			//微信支付
			wxPay() {
				uni.requestPayment({
					timeStamp: this.order.payData.timeStamp,
					nonceStr: this.order.payData.nonceStr,
					package: this.order.payData.package,
					signType: this.order.payData.signType,
					paySign: this.order.payData.paySign,
					success: (res) => {
						console.log('wxPay->success:', res)
						if (res.errMsg == 'requestPayment:ok') {
							// 查询订单支付状态
							this.isPaying = false;
							this.searchOrder(0); //查询订单
						} else {
							this.isPaying = false;
							if (this.userInfo.user_type != 1) this.showPaymentPopup = true;
						}
					},
					complete: (res) => {
						console.log('wxPay->complete:', res);
						this.isPaying = false;
						if (this.userInfo.user_type != 1) this.showPaymentPopup = true;
					},
				});
			},
			// #endif
			// #ifdef MP-ALIPAY
			//支付宝支付
			aliPay() {
				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: this.order.payData.trade_no,
					success: (res) => {
						console.log('success:', res)
						if (res.resultCode == 9000 || res.resultCode == 8000 || res.resultCode == 6004) {
							this.isPaying = false;
							this.searchOrder(0); //查询订单
						} else {
							this.isPaying = false;
							if (this.userInfo.user_type != 1) this.showPaymentPopup = true;
						}
					},
					fail: (res) => {
						this.isPaying = false;
						if (this.userInfo.user_type != 1) this.showPaymentPopup = true;
					}
				});
			},
			// #endif
			//查询订单支付状态
			async searchOrder(count) {
				if (count == 0) {
					uni.showLoading({
						title: '支付状态查询中',
					});
				}
				const {
					status,
					data,
					message
				} = await this.$request({
					url: '/AggregationCode/PlaceOrder/queryOrderStatus'
				}, {
					order_number: this.order.order_number,
				});
				if (status != 1) return uni.showModal({
					title: '温馨提示',
					content: message,
					showCancel: false,
					confirmText: '确定',
					confirmColor: '#ff5c6d'
				})
				if (data != 1) {
					count++;
					if (count > 10) {
						uni.hideLoading()
						uni.showModal({
							title: '错误提示',
							content: message,
							showCancel: false,
							confirmText: '确定',
							confirmColor: '#ff5c6d'
						});
					} else {
						setTimeout(() => {
							this.searchOrder(count);
						}, 1000);
					}
				} else {
					//支付成功
					this.paySuccess();
				}
			},
			//支付成功跳转页面
			paySuccess() {
				uni.hideLoading()
				uni.redirectTo({
					url: "./paySuccess?money=" + this.payInfo.actual_payment_amount + "&order_number=" + this.order.order_number
				});
			},

			//选择优惠券
			chooseCoupon() {
				if (!this.payInfo.order_amount) return uni.showToast({
					title: '请输入金额',
					icon: 'none'
				})
				this.isChooseCoupon = true;
				uni.navigateTo({
					url: './chooseCoupon?money=' + app.roundPrice(this.payInfo.order_amount - this.discountInfo.vip_dis_money)
				});
			},
			//去充值
			toRecharge() {
				uni.navigateTo({
					url: '/pages/mine/recharge/recharge?scene=1'
				})
			},
			//去会员中心
			toVip() {
				uni.navigateTo({
					url: '/pages/mine/card/card'
				})
			},
			//填写备注
			addRemark() {
				this.pay_remark = this.payInfo.remark;
				this.showRemarkPopup = true;
			},
			//提交备注
			confirmRemark() {
				this.payInfo.remark = this.pay_remark;
			},
			//输入订单金额
			clickNumber(e) {
				this.inputFucos = true;
				let num = this.payInfo.order_amount;
				if (num == '' && e == '.') {
					num = '0.';
				} else {
					if (num === '0' && e != '.') {
						num = e;
					} else {
						num += e;
					}
					let arr = num.split('.');
					if (arr.length > 1) {
						if (arr[1].length > 2) {
							arr[1] = arr[1].substr(0, 2);
						}
					} else {
						//最大支付一千万
						if (arr[0].length > 7 && arr[0] != '10000000') return;

						if (e == '.') {
							arr[1] = '';
						}
					}
					num = arr[0] + (arr.length > 1 ? ('.' + arr[1]) : '');
				}

				this.payInfo.order_amount = num;
				this.$nextTick(() => {
					this.handlerCanUseCoupon();
				})
			},
			//删除金额
			delNumber() {
				// console.log('delNumber')
				if (!this.payInfo.order_amount.length) return;
				this.payInfo.order_amount = this.payInfo.order_amount.substr(0, this.payInfo.order_amount.length - 1);
				this.$nextTick(() => {
					this.handlerCanUseCoupon();
				})
			},
			//长按删除
			delMoreNumber() {
				this.longDelState = true;
				// console.log('delMoreNumber')
				if (!this.payInfo.order_amount.length) return;
				this.delNumberTimer = setInterval(() => {
					if (!this.payInfo.order_amount.length) return clearInterval(this.delNumberTimer);
					this.payInfo.order_amount = this.payInfo.order_amount.substr(0, this.payInfo.order_amount.length - 1);
				}, 100)
			},
			//长按结束
			delNumberEnd() {
				// console.log('delNumberEnd')
				this.delNumberTimer && clearInterval(this.delNumberTimer);
				this.longDelState && this.$nextTick(() => {
					this.handlerCanUseCoupon();
				})
				this.longDelState = false;
			},
			//获取基本数据
			async getBaseData() {
				const {
					status,
					data,
					message
				} = await this.$request({
					url: '/AggregationCode/User/getBasicsInfo'
				}, {}, false);
				if (status != 1) return uni.showModal({
					title: '温馨提示',
					content: message,
					showCancel: false,
					confirmText: '确定',
					confirmColor: '#ff5c6d'
				})

				this.pageLoaded = true;
				data.user_info.balance = data.user_info.user_type != 1 ? (data.user_info.balance * 1) : 0;
				data.user_info.integral = data.user_info.user_type != 1 ? (data.user_info.integral * 1) : 0;
				this.userInfo = data.user_info;
				if (data.merchant_config) this.merConfig = data.merchant_config;
				this.couponList = data.usable_coupon_list;
				this.noticeList = data.registered_member_welfare_list;
				this.paySet = data.pay_list;
				this.payInfo.vip_discount_status = data.vip_discount_status;
				this.userInfo.login_state = app.XcxData.login_state;
				//this.integral_name = this.$store.integral_name;
				if (this.payInfo.order_amount) {
					this.$nextTick(() => {
						this.handlerCanUseCoupon();
						this.couponInfo = null;
					})
				}
			},
		},
		watch: {
			couponInfo: {
				deep: true,
				handler(n) {
					if (n) {
						this.payInfo.coupon_choice_type = n.coupon_choice_type;
						this.payInfo.coupon_record_id = n.id;
					} else {
						this.payInfo.coupon_choice_type = '';
						this.payInfo.coupon_record_id = '';
					}
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.content {
		background: #F2F3F5;
		overflow: hidden;

		.content-top-box {
			position: relative;

			.content-top-bg {
				width: 100%;
				height: 156rpx;
				position: absolute;
				top: 0;
				left: 0;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background: linear-gradient(180deg, rgba(var(--primary-rgb-color), 0.13) 0%, rgba(255, 255, 255, 0.92) 100%);

				// .content-top-bg-img {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}

			.store-info-box {
				position: relative;
				z-index: 1;
				width: 100%;
				height: 156rpx;

				.store-img-box {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
					overflow: hidden;
					padding: 4rpx;
					box-sizing: border-box;
				}

				.store-info-right {
					flex: 1;
					overflow: hidden;
					margin-left: 20rpx;

					.merchant-name {
						color: #1E1E1E;
						font-size: 32rpx;
						line-height: 36rpx;
					}

					.store-name {
						font-size: 28rpx;
						line-height: 36rpx;
						color: #929397;
						margin-top: 14rpx;
					}

				}
			}

			.price-content {
				margin-top: 20rpx;
				padding-bottom: 60rpx;
				border-bottom: 2rpx solid #F3F3F4;

				.prize-title {
					font-size: 30rpx;
					line-height: 38rpx;
					color: #1E1E1E;
				}

				.prize-input-box {
					margin-top: 28rpx;
					font-size: 56rpx;
					line-height: 60rpx;
					color: #1E1E1E;

					.prize-input {
						margin-left: 20rpx;
						flex: 1;
						height: 60rpx;
					}

					.input-fucos {
						position: relative;
						display: inline-block;
						vertical-align: top;

						&::after {
							content: '';
							width: 4rpx;
							height: 60rpx;
							position: absolute;
							left: 0;
							top: 0;
							animation: showhide 1.5s infinite;
							background-image: initial;
							background-position-x: initial;
							background-position-y: initial;
							background-size: initial;
							background-repeat-x: initial;
							background-repeat-y: initial;
							background-attachment: initial;
							background-origin: initial;
							background-clip: initial;
							animation-duration: 1.3s;
							animation-timing-function: ease;
							animation-delay: 0s;
							animation-iteration-count: infinite;
							animation-direction: normal;
							animation-fill-mode: none;
							animation-play-state: running;
							animation-name: showhide;
							animation-timeline: auto;
							/* #ifdef MP-ALIPAY */
							background-color: #3874F6;
							/* #endif */
							/* #ifdef MP-WEIXIN */
							background-color: #07C160;
							/* #endif */
						}

						@keyframes showhide {
							0% {
								opacity: 1;
							}

							50% {
								opacity: 0;
							}

							100% {
								opacity: 1;
							}
						}
					}

					.prize-input-pl {
						color: #CCCCCC;
						font-weight: 400;
					}
				}
			}

			.scroll-tip-box {
				height: 86rpx;

				.scroll-tip-left {
					flex: 1;
					height: 100%;
					overflow: hidden;

					.notice-icon {
						font-size: 30rpx;
						color: #EFCA84;
						margin-right: 12rpx;
					}

					.notice-bar {
						flex: 1;
						height: 86rpx;
						font-size: 30rpx;
						color: #5F6267;
						line-height: 86rpx;

						.uni-noticebar {
							margin-bottom: 0 !important;
							height: 100%;
							padding: 0 !important;
						}
					}
				}

				.scroll-tip-right {
					margin-left: 20rpx;
					height: 100%;
					font-size: 30rpx;
					line-height: 36rpx;
					color: #ff5c6d;
				}
			}
		}

		.add-remark {
			color: #626F91;
			font-size: 30rpx;
			line-height: 38rpx;
			margin-left: 20rpx;
			padding: 0 20rpx;

			&:active {
				opacity: 0.8;
			}
		}

		.btn-item-box {

			.btn-item {
				// width: 184rpx;
				padding: 0 24rpx 0 30rpx;
				height: 76rpx;
				border: 1rpx solid #E9CC94;
				border-right: none;
				border-radius: 40rpx 0 0 40rpx;
				background-color: #FDF9ED;
				box-sizing: border-box;
				color: #6A5129;
				font-size: 28rpx;
				line-height: 76rpx;
				text-align: center;

				&:active {
					opacity: 0.6;
				}

				&+.btn-item {
					margin-top: 20rpx;
					padding-right: 20rpx;
				}

				.btn-icon {
					font-size: 39rpx;
					color: #EFCA84;
					margin-right: 10rpx;
				}
			}
		}

		.keybord-box {
			padding: 34rpx 0 54rpx;
			background-color: #ECECEC;
			text-align: center;
			box-sizing: border-box;

			&.big-keybord {
				padding-bottom: 64rpx;
			}

			.keybord-left {
				width: 528rpx;
				display: inline-flex;
				vertical-align: top;

				.key-item-box {
					flex: 1;
					height: 104rpx;
					padding: 6rpx;
					box-sizing: border-box;
					min-width: 30%;

					.key-item {
						width: 100%;
						height: 100%;
						font-size: 48rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						background-color: #FFFFFF;
						box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
						color: #333333;
						text-align: center;

						&:active {
							opacity: 0.6;
						}
					}

					&.key-item-zero {
						flex: none;
						width: 66.666666%;
					}
				}
			}

			.keybord-right {
				width: 168rpx;
				display: inline-block;
				vertical-align: top;
				padding: 6rpx;

				.key-del {
					width: 100%;
					height: 92rpx;
					font-size: 48rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					background-color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
					color: #333333;
					text-align: center;
					margin-bottom: 12rpx;

					&:active {
						opacity: 0.6;
					}

					.key-item-del-icon {
						font-size: 53rpx;
					}
				}

				.pay-btn {
					height: 298rpx;
					border-radius: 10rpx;
					line-height: 298rpx;
					text-align: center;
					color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
					/* #ifdef MP-ALIPAY */
					background-color: #3874F6;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					background-color: #07C160;
					/* #endif */

					&:active {
						opacity: 0.8;
					}

					&.disabled {
						/* #ifdef MP-ALIPAY */
						background-color: #AEC9F4;
						/* #endif */
						/* #ifdef MP-WEIXIN */
						background-color: #B1E3C0;
						/* #endif */
					}
				}
			}
		}
	}

	.right-icon {
		font-size: 22rpx;
		color: #929397;
		margin-left: 14rpx;
	}

	.notice-detail-box {
		padding: 20rpx 10rpx;

		.notice-detail-list {
			position: relative;

			.notice-detail-list-title {
				font-size: 30rpx;
				line-height: 38rpx;
				color: #000000;
				margin-bottom: 12rpx;
				position: relative;
				padding-left: 26rpx;

				&:before {
					content: "";
					width: 14rpx;
					height: 14rpx;
					border-radius: 50%;
					background-color: #ff5c6d;
					position: absolute;
					top: 13rpx;
					left: 0;
					margin-right: 12rpx;
				}
			}

			.notice-detail-list-info {
				font-size: 30rpx;
				line-height: 38rpx;
				color: #5F6267;
				margin-bottom: 16rpx;
			}
		}

	}

	.remark-box {
		padding: 0 20rpx 20rpx;

		.remark-input {
			font-size: 30rpx;
			color: #1E1E1E;
			line-height: 48rpx;
			height: 150rpx;
			width: 100%;
		}

		.remark-input-pl {
			font-size: 30rpx;
			color: #CCCCCC;
			line-height: 48rpx;
		}
	}

	.coupon-box {
		height: 94rpx;

		.coupon-left {
			.coupon-icon {
				font-size: 39rpx;
				margin-right: 6rpx;
				background: -webkit-linear-gradient(135deg, #EFCA84 0%, #DFAB47 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.coupon-text {
				font-size: 30rpx;
				line-height: 36rpx;
				color: #1E1E1E;
			}
		}

		.coupon-right {
			font-size: 30rpx;
			line-height: 36rpx;

			.coupon-tips {
				color: #5F6267;
			}

			.coupon-pl {
				color: #929397;
			}
		}

	}

	.settlement-box {

		.settlement-store-name {
			font-size: 28rpx;
			color: #1E1E1E;
			line-height: 36rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.settlement-all-money {
			font-size: 56rpx;
			color: #1E1E1E;
			line-height: 64rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.settlement-list {
			padding: 30rpx 28rpx;
			box-sizing: border-box;
			width: 100%;

			&.vip-box {

				.vip-right {
					flex: 1;
					overflow: hidden;
					margin-left: 20rpx;

					.vip-info-top {
						width: 100%;

						.vip-name-box {
							flex: 1;
							overflow: hidden;
							font-size: 30rpx;
							line-height: 38rpx;
							color: #1E1E1E;

							.plus-vip-icon {
								font-size: 69rpx;
								margin-left: 4rpx;
								color: #BE9161;
							}

							.vip-icon {
								font-size: 69rpx;
								margin-left: 4rpx;
								color: #E88752;
							}
						}
					}
				}

				.vip-info-text {
					font-size: 28rpx;
					color: #929397;
					line-height: 34rpx;
					white-space: nowrap;

					&+.vip-info-text {
						margin-left: 20rpx;
					}
				}
			}

			&.coupon-box {
				.coupon-icon {
					margin-right: 30rpx;
					margin-left: 10rpx;
				}
			}

			&.integral-box {
				padding-top: 10rpx;

				.integral-icon {
					font-size: 40rpx;
					color: #FCA315;
					margin-left: 10rpx;
				}

				.integral-right {
					flex: 1;
					overflow: hidden;
					margin-left: 30rpx;

					.integral-right-top {
						margin-bottom: 6rpx;

						.integral-title {
							font-size: 30rpx;
							color: #1E1E1E;
							line-height: 38rpx;
						}

						.integral-input-box {
							.integral-input {
								width: 124rpx;
								height: 52rpx;
								border-radius: 8rpx;
								background-color: #F2F3F5;
								font-size: 28rpx;
								line-height: 36rpx;
								color: #1E1E1E;
								text-align: center;
							}
						}
					}

					.integral-text {
						font-size: 26rpx;
						line-height: 34rpx;
						color: #929397;
					}
				}
			}

			&.discount-box {
				.discount-title {
					font-size: 30rpx;
					line-height: 38rpx;
					color: #1E1E1E;
				}

				.discount-info {
					font-size: 30rpx;
					line-height: 38rpx;
					color: #929397;
				}

				.discount-sub-title {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #929397;

					.primary-color {
						margin-left: 20rpx;
					}
				}
			}

			&.payment-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 40rpx;
				}

				.payment-title {
					font-size: 32rpx;
					line-height: 36rpx;
					color: #000000;
				}

				.vip-balance {
					font-size: 28rpx;
					line-height: 36rpx;
					color: #929397;
					margin-left: 20rpx;

					&+.vip-balance {
						margin-left: 12rpx;
					}
				}

				.payment-type-icon {
					font-size: 48rpx;
					margin-right: 20rpx;
				}

				.balance-pay-icon {
					color: #FF870E;
				}

				.wechat-pay-icon {
					color: #09BB07;
				}

				.alipay-icon {
					color: #3874F6;
				}

				.group-pay-icon {
					color: #2194FF;
				}

				.payment-group-box {
					margin-top: 20rpx;
					mmargin-bottom: 20rpx;

					.payment-group-title {

						font-size: 32rpx;
						line-height: 36rpx;
						color: #1E1E1E;
					}

					.payment-group-input {
						font-size: 32rpx;
						line-height: 36rpx;
						color: #1E1E1E;
						width: 300rpx;
						text-align: right;
					}

					.payment-group-pl {
						font-size: 32rpx;
						line-height: 36rpx;
						color: #CCCCCC;
					}
				}
			}

			qh-radio {
				margin-right: -20rpx;
			}
		}
	}

	.tips-color {
		color: #929397;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.font-size-26 {
		font-size: 26rpx;
	}

	.mar-top-12 {
		margin-top: 12rpx;
	}

	.mar-top-16 {
		margin-top: 16rpx;
	}

	.mar-top-28 {
		margin-top: 28rpx;
	}

	.mar-btm-30 {
		margin-bottom: 30rpx;
	}

	.pad-btm-30 {
		padding-bottom: 30rpx;
	}
</style>
